<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建账户 - 开始您的全新体验</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 - 冷色调主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1976D2', // 深蓝
                        secondary: '#26C6DA', // 青色
                        success: '#00BFA5', // 冷色调成功色
                        warning: '#FFB74D',
                        danger: '#EF5350',
                        neutral: {
                            100: '#F0F7FF', // 极浅蓝背景
                            200: '#E0EFFF',
                            300: '#BBDEFB',
                            400: '#90CAF9',
                            500: '#64B5F6',
                            600: '#42A5F5',
                            700: '#1976D2',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(25, 118, 210, 0.1)',
                        'hover': '0 20px 40px -5px rgba(25, 118, 210, 0.2)',
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .bg-gradient-register-cold {
        background: linear-gradient(135deg, #1976D2 0%, #26C6DA 100%);
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      /* .input-focus {
        @apply focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none;
      } */
    }
  </style>
</head>

<body class="font-inter bg-neutral-100 min-h-screen text-neutral-700 antialiased">

    <!-- 统一导航菜单 -->
    <!-- <nav class="bg-white border-b border-neutral-200 sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <div class="flex-shrink-0 flex items-center">
                    <i class="fa fa-cube text-primary text-xl mr-2"></i>
                    <span class="font-medium text-lg">智能运维平台</span>
                </div>
                <div class="hidden sm:ml-6 sm:flex sm:space-x-6">
                    <a href="多模态.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-line-chart mr-1"></i> 多模态评估
                    </a>
                    <a href="聊天助手.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-comment mr-1"></i> 聊天助手
                    </a>
                    <a href="使用率.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-microchip mr-1"></i> 性能监控
                    </a>
                    <a href="ai.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-bug mr-1"></i> 故障诊断
                    </a>
                    <a href="os运维场景.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-server mr-1"></i> 运维场景
                    </a>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <a href="登录.html" class="text-neutral-500 hover:text-neutral-700 inline-flex items-center px-1 pt-1 text-sm font-medium">
                    <i class="fa fa-sign-in mr-1"></i> 登录
                </a>
                <a href="注册.html" class="text-primary font-medium inline-flex items-center px-1 pt-1 text-sm border-b-2 border-primary">
                    <i class="fa fa-user-plus mr-1"></i> 注册
                </a>
                <div class="relative">
                    <button type="button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        <img class="h-8 w-8 rounded-full" src="https://i.pravatar.cc/150?img=33" alt="用户头像">
                    </button>
                </div>
                <button type="button" class="p-2 rounded-full text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 focus:outline-none">
                    <i class="fa fa-cog"></i>
                </button>
            </div>
        </div>
    </div>  -->

    <!-- 移动端菜单 -->
    <div class="sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
            <a href="登录.html"
                class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-sign-in mr-1"></i> 登录
            </a>
            <a href="注册.html"
                class="bg-primary text-white block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">
                <i class="fa fa-user-plus mr-1"></i> 注册
            </a>
            <a href="多模态.html"
                class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-line-chart mr-1"></i> 多模态评估
            </a>
            <a href="聊天助手.html"
                class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-comment mr-1"></i> 聊天助手
            </a>
            <a href="使用率.html"
                class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-microchip mr-1"></i> 性能监控
            </a>
            <a href="ai.html"
                class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-bug mr-1"></i> 故障诊断
            </a>
            <a href="os运维场景.html"
                class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-server mr-1"></i> 运维场景
            </a>
        </div>
    </div>
    </nav>
    <div class="flex flex-col md:flex-row min-h-screen">
        <!-- 左侧品牌区域 - 冷色调渐变 -->
        <div
            class="hidden md:flex md:w-1/2 bg-gradient-register-cold p-12 flex-col justify-center text-white relative overflow-hidden">
            <!-- 装饰图形 -->
            <div class="absolute top-1/4 right-1/4 w-96 h-96 bg-white/10 rounded-full -mr-48 -mt-48"></div>
            <div class="absolute bottom-1/3 left-1/3 w-64 h-64 bg-white/10 rounded-full -ml-32 -mb-32"></div>

            <div class="relative z-10 max-w-md">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow mb-6">
                    加入我们
                </h1>
                <p class="text-white/90 text-lg mb-10">
                    创建账户，开启全新体验。只需几分钟，即可享受我们提供的全部服务和功能。
                </p>

                <div class="space-y-8">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 bg-white/20 p-3 rounded-lg mt-1">
                            <i class="fa fa-check text-lg"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="font-semibold text-lg">免费注册</h3>
                            <p class="text-white/80 mt-1">无需信用卡，立即开始使用基础功能</p>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex-shrink-0 bg-white/20 p-3 rounded-lg mt-1">
                            <i class="fa fa-check text-lg"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="font-semibold text-lg">专属体验</h3>
                            <p class="text-white/80 mt-1">个性化推荐和定制化服务内容</p>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex-shrink-0 bg-white/20 p-3 rounded-lg mt-1">
                            <i class="fa fa-check text-lg"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="font-semibold text-lg">多端同步</h3>
                            <p class="text-white/80 mt-1">在任何设备上无缝访问您的账户</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧注册表单区域 -->
        <div class="w-full md:w-1/2 flex items-center justify-center p-6 md:p-12">
            <div class="w-full max-w-md w-[350px]">
                <!-- 移动端品牌标识 -->
                <div class="md:hidden flex justify-center mb-10">
                    <h1 class="text-2xl font-bold text-primary">Logo</h1>
                </div>

                <div class="text-center mb-10">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700 mb-2">创建新账户</h2>
                    <p class="text-neutral-500">填写以下信息完成注册</p>
                </div>

                <!-- 注册表单 -->
                <form id="registerForm" class="space-y-5">
                    <!-- 用户名输入 -->
                    <div class="space-y-2">
                        <label for="username" class="block text-sm font-medium text-neutral-600">用户名</label>
                        <div class="relative">
                            <div
                                class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-neutral-400">
                                <i class="fa fa-user"></i>
                            </div>
                            <input type="text" id="username"
                                class="w-full pl-10 pr-4 py-3 rounded-xl border border-neutral-200 bg-white input-focus transition-custom"
                                placeholder="请设置用户名" required>
                            <div class="hidden absolute inset-y-0 right-0 pr-3 flex items-center text-success"
                                id="usernameValid">
                                <i class="fa fa-check-circle"></i>
                            </div>
                        </div>
                        <p class="text-xs text-neutral-400">用户名由3-20个字母、数字或下划线组成</p>
                    </div>

                    <!-- 邮箱输入 -->
                    <div class="space-y-2">
                        <label for="email" class="block text-sm font-medium text-neutral-600">电子邮箱</label>
                        <div class="relative">
                            <div
                                class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-neutral-400">
                                <i class="fa fa-envelope"></i>
                            </div>
                            <input type="email" id="email"
                                class="w-full pl-10 pr-4 py-3 rounded-xl border border-neutral-200 bg-white input-focus transition-custom"
                                placeholder="请输入您的邮箱" required>
                            <div class="hidden absolute inset-y-0 right-0 pr-3 flex items-center text-success"
                                id="emailValid">
                                <i class="fa fa-check-circle"></i>
                            </div>
                        </div>
                        <p class="text-xs text-neutral-400">我们将发送验证邮件到该邮箱</p>
                    </div>

                    <!-- 密码输入 -->
                    <div class="space-y-2">
                        <label for="password" class="block text-sm font-medium text-neutral-600">设置密码</label>
                        <div class="relative">
                            <div
                                class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-neutral-400">
                                <i class="fa fa-lock"></i>
                            </div>
                            <input type="password" id="password"
                                class="w-full pl-10 pr-10 py-3 rounded-xl border border-neutral-200 bg-white input-focus transition-custom"
                                placeholder="请设置密码" required>
                            <button type="button" id="togglePassword"
                                class="absolute inset-y-0 right-0 pr-3 flex items-center text-neutral-400 hover:text-neutral-700 transition-custom">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>

                        <!-- 密码强度指示器 -->
                        <div class="space-y-1">
                            <div class="flex justify-between text-xs">
                                <span>密码强度</span>
                                <span id="passwordStrength">弱</span>
                            </div>
                            <div class="h-1.5 bg-neutral-200 rounded-full overflow-hidden">
                                <div id="strengthBar" class="h-full bg-danger w-1/3 transition-all duration-300"></div>
                            </div>
                        </div>
                        <p class="text-xs text-neutral-400">密码至少8位，包含字母和数字</p>
                    </div>

                    <!-- 确认密码 -->
                    <div class="space-y-2">
                        <label for="confirmPassword" class="block text-sm font-medium text-neutral-600">确认密码</label>
                        <div class="relative">
                            <div
                                class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-neutral-400">
                                <i class="fa fa-lock"></i>
                            </div>
                            <input type="password" id="confirmPassword"
                                class="w-full pl-10 pr-10 py-3 rounded-xl border border-neutral-200 bg-white input-focus transition-custom"
                                placeholder="请再次输入密码" required>
                            <button type="button" id="toggleConfirmPassword"
                                class="absolute inset-y-0 right-0 pr-3 flex items-center text-neutral-400 hover:text-neutral-700 transition-custom">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                        <p id="passwordMatch" class="hidden text-xs"></p>
                    </div>

                    <!-- 同意条款 -->
                    <div class="flex items-start pt-2">
                        <div class="flex items-center h-5">
                            <input id="terms" type="checkbox"
                                class="w-4 h-4 rounded border-neutral-300 text-primary focus:ring-primary/20" required>
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="terms" class="text-neutral-600">我同意
                                <a href="#" class="text-primary hover:underline transition-custom">服务条款</a> 和
                                <a href="#" class="text-primary hover:underline transition-custom">隐私政策</a>
                            </label>
                        </div>
                    </div>

                    <!-- 注册按钮 -->
                    <button type="submit" id="registerBtn"
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-xl transition-custom flex items-center justify-center group mt-4 disabled:opacity-50 disabled:cursor-not-allowed">
                        <span>创建账户</span>
                        <i class="fa fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                    </button>

                    <!-- 分隔线 -->
                    <div class="relative flex items-center mt-8">
                        <div class="flex-grow h-px bg-neutral-200"></div>
                        <span class="px-4 text-sm text-neutral-400">或使用以下方式注册</span>
                        <div class="flex-grow h-px bg-neutral-200"></div>
                    </div>

                    <!-- 社交注册 -->
                    <div class="grid grid-cols-3 gap-4 mt-6">
                        <button type="button"
                            class="flex items-center justify-center py-3 border border-neutral-200 rounded-xl hover:bg-neutral-50 transition-custom">
                            <i class="fa fa-weixin text-[#07C160] text-xl"></i>
                        </button>
                        <button type="button"
                            class="flex items-center justify-center py-3 border border-neutral-200 rounded-xl hover:bg-neutral-50 transition-custom">
                            <i class="fa fa-qq text-[#12B7F5] text-xl"></i>
                        </button>
                        <button type="button"
                            class="flex items-center justify-center py-3 border border-neutral-200 rounded-xl hover:bg-neutral-50 transition-custom">
                            <i class="fa fa-github text-neutral-700 text-xl"></i>
                        </button>
                    </div>
                </form>

                <!-- 登录提示 -->
                <div class="mt-10 text-center">
                    <p class="text-neutral-500">
                        已有账户?
                        <a href="login.html"
                            class="font-medium text-primary hover:text-primary/80 transition-custom">立即登录</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 密码显示/隐藏切换
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');
        const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
        const confirmPasswordInput = document.getElementById('confirmPassword');

        // 密码显示切换
        togglePassword.addEventListener('click', () => togglePasswordVisibility(passwordInput, togglePassword));
        toggleConfirmPassword.addEventListener('click', () => togglePasswordVisibility(confirmPasswordInput, toggleConfirmPassword));

        // 密码显示/隐藏函数
        function togglePasswordVisibility(input, toggleBtn) {
            const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
            input.setAttribute('type', type);

            // 切换图标
            toggleBtn.querySelector('i').classList.toggle('fa-eye');
            toggleBtn.querySelector('i').classList.toggle('fa-eye-slash');
        }

        // 密码强度检测
        passwordInput.addEventListener('input', checkPasswordStrength);

        function checkPasswordStrength() {
            const password = passwordInput.value;
            const strengthBar = document.getElementById('strengthBar');
            const strengthText = document.getElementById('passwordStrength');

            // 简单的密码强度检测逻辑
            let strength = 0;

            if (password.length >= 8) strength++;
            if (password.match(/[A-Za-z]/) && password.match(/[0-9]/)) strength++;
            if (password.length >= 12 && password.match(/[^A-Za-z0-9]/)) strength++;

            // 更新强度条和文本
            switch (strength) {
                case 0:
                case 1:
                    strengthBar.className = 'h-full bg-danger w-1/3 transition-all duration-300';
                    strengthText.textContent = '弱';
                    strengthText.className = 'text-danger';
                    break;
                case 2:
                    strengthBar.className = 'h-full bg-warning w-2/3 transition-all duration-300';
                    strengthText.textContent = '中';
                    strengthText.className = 'text-warning';
                    break;
                case 3:
                    strengthBar.className = 'h-full bg-success w-full transition-all duration-300';
                    strengthText.textContent = '强';
                    strengthText.className = 'text-success';
                    break;
            }

            // 检查密码是否匹配
            checkPasswordMatch();
        }

        // 检查密码是否匹配
        confirmPasswordInput.addEventListener('input', checkPasswordMatch);

        function checkPasswordMatch() {
            const password = passwordInput.value;
            const confirmPassword = confirmPasswordInput.value;
            const matchIndicator = document.getElementById('passwordMatch');
            const registerBtn = document.getElementById('registerBtn');

            if (confirmPassword.length === 0) {
                matchIndicator.classList.add('hidden');
                return;
            }

            if (password === confirmPassword && password.length > 0) {
                matchIndicator.textContent = '密码匹配';
                matchIndicator.className = 'text-success text-xs';
                matchIndicator.classList.remove('hidden');
                registerBtn.removeAttribute('disabled');
            } else {
                matchIndicator.textContent = '密码不匹配';
                matchIndicator.className = 'text-danger text-xs';
                matchIndicator.classList.remove('hidden');
                registerBtn.setAttribute('disabled', 'disabled');
            }
        }

        // 表单验证反馈
        const usernameInput = document.getElementById('username');
        const emailInput = document.getElementById('email');

        usernameInput.addEventListener('blur', () => validateField(usernameInput, /^[a-zA-Z0-9_]{3,20}$/, 'usernameValid'));
        emailInput.addEventListener('blur', () => validateField(emailInput, /^[^\s@]+@[^\s@]+\.[^\s@]+$/, 'emailValid'));

        // 字段验证函数
        function validateField(input, regex, validId) {
            const value = input.value;
            const validIndicator = document.getElementById(validId);

            if (value.length === 0) {
                validIndicator.classList.add('hidden');
                return;
            }

            if (regex.test(value)) {
                validIndicator.classList.remove('hidden');
                input.classList.remove('border-danger');
                input.classList.add('border-success');
            } else {
                validIndicator.classList.add('hidden');
                input.classList.remove('border-success');
                input.classList.add('border-danger');
            }
        }

        // 表单提交处理
        const registerForm = document.getElementById('registerForm');
        registerForm.addEventListener('submit', (e) => {
            e.preventDefault();

            // 在实际应用中，这里会有表单验证和API请求
            alert('注册成功！在实际应用中，这里会发送验证邮件并跳转到登录页。');
            window.location.href = 'login.html';
        });
    </script>
</body>

</html>